<template>
  <div class="attendancegroup">
    <el-table
        :data="tableData"
        border
        highlight-current-row
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">
      <!--      <el-table-column prop="userid"></el-table-column>-->
      <el-table-column type="selection" width="50" label="序号">
      </el-table-column>
      <el-table-column label="考勤组名称" prop="groupName">
      </el-table-column>
      <el-table-column label="扣除时间段" prop="deductionTimes">
      </el-table-column>
      <el-table-column label="是否允许加班" prop="isAllowOvertime">
        <template slot-scope="scope">
          <el-tag v-text="scope.row.isAllowOvertime?'是':'否'" :type="scope.row.isAllowOvertime?'':'warning'"></el-tag>
        </template>
      </el-table-column>
      <el-table-column label="生产排班" prop="attendanceRosteringClass">
      </el-table-column>
      <el-table-column label="薪资排班" prop="salaryRosteringClass">
      </el-table-column>
      <el-table-column label="创建日期" prop="createTime">
        <template slot-scope="scope">
          {{ scope.row.createTime|formatDate }}
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          hide-on-single-page
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size=size
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "DingAttendanceGroup",
  data() {
    return {
      currentPage: 1,
      total: 0,
      size: 10,
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          },
          {
            text: '一个月前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', date);
            }
          }]
      },
      formLabelWidth: '120px',
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.dialogFormVisible = false
      axios.get("/ding_attendance_group/list/" + this.currentPage + "/" + this.size).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          Object.freeze(this.tableData)
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        } else {
          this.tableData = []
          this.total = 0
          this.pages = 1

        }
      })

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
  }
}
</script>

<style scoped>

</style>
